import { Component, OnInit,Output,EventEmitter,Input} from '@angular/core';
import {fadeIn,flyOut,zoomIn,downIn} from "../../../../../animate";
import { UtilService} from "../../../../../my-service/util.service";

@Component({
  selector: 'app-grade-minute',
  templateUrl: './grade-minute.component.html',
  styleUrls: ['./grade-minute.component.css'],
  animations:[fadeIn,flyOut,zoomIn,downIn]
})
export class GradeMinuteComponent implements OnInit {
  @Output() onCloseMinute = new EventEmitter<boolean>();
  @Input () currentIndex:number; //当前学生索引
  @Input () studentArr:any;//存放所有学生的数组
  @Input () className:string;//班级名字
  readImgUrl:string = null;
 classMinute = {
   dataSet:[
     {
       key    : '碰撞交流',
       scale   : '扫码互动',
       grade    : 99,
       minute: 'logo'
     },
     {
       key    : '碰撞交流',
       scale   : '扫码互动',
       grade    : 99,
       minute: 'logo'
     },
     {
       key    : '碰撞交流',
       scale   : '扫码互动',
       grade    : 99,
       minute: 'logo'
     },
     {
       key    : '碰撞交流',
       scale   : '扫码互动',
       grade    : 99,
       minute: 'logo'
     }
   ],//表格内的数据
   showTableList:5,//默认最大显示5条数据，如果要显示更多，点击查看更多
   isPage:false,//是否需要分页
   boxWidth:214,//每个盒子的宽度,算上右1px的border
   boxHeight:214,//每个盒子的高度，算上下1px的border
   containerWidth:null,//计算装每个盒子容器的宽度为多少
   containerHeight:null,
   maxTotal:9,//最多放9个盒子
   rowTotal:3,//限定每一行能放的盒子
   listTotal:3,//限定多少列
   emptyBox:null,//需要摆多少个空盒子
   totalBox:null,//总共有多少个盒子
   totalBoxArr:[],
   emptyBoxArr:[],
   tablePattern:false,//是否展现表格模式
   studentSelect:0,//默认选中的第一个
   onCloseMinute:false,
   _this:null,
   bodyHeight:null,//获取当前窗口高度用来设置遮罩层
   defaultImg:'/assets/img/rollIndex/touxiang.png',
   letf_containerHeight:null,//左边可用的高度
   tableHeight:null,//表格宽度
   getEmptyBox:function () {
     this.maxTotal = this.rowTotal*this.listTotal;
     this.emptyBox = this.maxTotal - this.totalBox;
     if(this.emptyBox >=1){
       this.emptyBoxArr.length = this.emptyBox
     }else {
       this.emptyBoxArr.length = 0;
     }

   },
   _constructor:function () {
     this.bodyHeight  = document.body.clientHeight;
     this.containerWidth = this.rowTotal * this.boxWidth +1;//+1加的Border
     this.containerHeight = this.listTotal *this.boxHeight +1;
     this.totalBoxArr = this._this.studentArr;
     this.studentSelect = this._this.currentIndex;
     this.totalBox=this.totalBoxArr.length ;
     this.getEmptyBox();
   },
   selectNext:function () {
     if(this.studentSelect <this.totalBoxArr.length-1){
       ++this.studentSelect;
     }else {
         this.studentSelect = 0;
     }
   },
   selectLast:function () {
     if (this.studentSelect !==0){
       --this.studentSelect;
     }else {
       this.studentSelect = this.totalBoxArr.length-1;
     }
   },
   tableConstructor:function () {
     this.letf_containerHeight = document.body.clientHeight-44;
     this.tableHeight = this.letf_containerHeight-532;
   }
 };

  constructor(
    private utilServe: UtilService,
  ) {
    this.readImgUrl = this.utilServe.readImgUrl;
  }

  ngOnInit() {
    this.classMinute._this = this;
    this.classMinute._constructor();
    this.classMinute.tableConstructor();
    let _this = this;
    window.onresize = function () {
      _this.classMinute.tableConstructor();
      if (this.document.body.clientWidth <= 1440&&document.body.clientWidth >=1100){
        _this.classMinute.rowTotal = 3;
        _this.classMinute.listTotal = 2;
        _this.classMinute._constructor();
      }else if(document.body.clientWidth <=1100&&document.body.clientWidth >1080){
        _this.classMinute.rowTotal = 2;
        _this.classMinute.listTotal = 2;
        _this.classMinute._constructor();
      }else if (document.body.clientWidth <1080){
        _this.classMinute.rowTotal = 2;
        _this.classMinute.listTotal = 1;
        _this.classMinute._constructor();
      }
    }
  }
 onClose() {
    this.onCloseMinute.emit(this.classMinute.onCloseMinute);
 }
}
